import { type PropsWithChildren, type CSSProperties } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { DraggableStyle } from '../style';
// import classnames from 'classnames';

const SortableItem = (props: PropsWithChildren<{ id: number | string; disabled?: boolean }>) => {
	const { id, disabled = true } = props;

	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
		id,
		disabled
	});

	const style: CSSProperties = {
		position: 'relative',
		transform: CSS.Transform.toString(transform),
		transition,
		zIndex: isDragging ? 999 : 0
	};

	return (
		<div ref={setNodeRef} style={style} {...attributes} {...listeners}>
			<DraggableStyle is_dragging={`${isDragging}`} is_sort={`${disabled}`}>
				{props.children}
			</DraggableStyle>
		</div>
	);
};

export default SortableItem;
